<!doctype html>
<html>
	<head>
		<title> Main </title>
    <meta charset="utf-8">
		<style>
		#paper {
			border: 1px solid silver;
			width: 600px;
			height: 1100px;
			margin: auto;
			position: relative;
			background-image: url(http://img1-test.tech11.cn/bg-grid.png);
		}
		</style>
	</head>

	<body>
		<div id="paper">

		</div>
	</body>

</html>

<script type="text/javascript" src="http://img1-test.tech11.cn/raphael-min.js"></script>
<script language="javascript">
	var getNextColor = function(){
		var interval = Math.floor(Math.random() * 20) + 1;
		var r = Raphael.getColor();
		var i = 0;
		for(; i < interval; i++){
			r = Raphael.getColor();
		}
		return r;
	};

	window.onload = function(){
		var r = Raphael('paper', 600, 1100);
		var rad = 8;
		var w = 80;
		var h = 80;
		var textFontSize = 13;
		var textColor = getNextColor();

		var seats = [
			[0, 220, '陈哲聪'], 
			[90, 220, '？？'], 

			[0, 320, '？？'], 
			[90, 320, '？？'], 

			[0, 405, ''], 
			[90, 405, '薛利鹏'], 

			[90, 620, '吴强'], 
			[90, 705, '梁华雄'], 

			[0, 805, '陈裕高'], 
			[90, 805, '包汉雨'],
			
			[0, 890, '罗清'], 
			[90, 890, '倪平强'], 
			
			[50, 990, '丁永'], 
			[140, 990, '歐傑明珠'],

			[250, 10, '林泽锐'],
			[350, 10, '何添和'],
			[450, 50, '邓俊龙'],

			[250, 120, '邓超'],
			[350, 120, '胡晓飞'],

			[250, 220, '杨磊磊'],
			[350, 220, '齐杰'],
			[450, 220, '欧阳学铭'],

			[250, 320, '？？'], 
			[350, 320, '？？'], 
			[450, 320, '吴钟'], 

			[250, 405, '？？'], 
			[350, 405, '？？'], 
			[450, 405, '？？'], 

			[250, 520, '汪兆千'], 
			[350, 520, '曹东旭'], 
			[450, 520, '魏永东'], 

			[250, 705, '周瑾慧'], 
			[350, 705, '潘锦涛'], 
			[450, 705, '阮康富'], 

			[250, 805, '余林烨'], 
			[350, 805, '章育涛'], 
			[450, 805, '孙成'], 

			[250, 890, '？？'], 
			[350, 890, '陈弘根'], 
			[450, 890, '黄卓斌'], 

			[350, 990, '谭志强'], 
		];

		console.log(seats.length);

		r.rect(200, 10, 40, 40, 0);
		r.text(210, 20, '门').attr({'font-size': textFontSize, fill: '#000'});

		seats.forEach(function(it){
			r.rect(it[0], it[1], w, h, rad);
			r.text(it[0] + 20, it[1] + 20, it[2])
				.attr({'font-size': textFontSize, fill: textColor})

		});
	};
</script>